<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName('/import-create/list')">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item name="ImportCreateDetail"></ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <div class="task-detail-header">
            <div class="title">
                <p class="name">{{ tableName }}</p>
                <p v-if="!$route.query.descriptionType" class="description">
                    {{ $route.query.description || "暂无描述" }}
                </p>
                <el-tooltip
                    v-if="$route.query.descriptionType"
                    effect="dark"
                    :content="$route.query.description"
                    :disabled="!$route.query.description"
                    placement="top">
                    <p class="description">
                        {{ $route.query.description || "暂无描述" }}
                    </p>
                </el-tooltip>
            </div>
            <div>
                <el-button @click="goBack">返回</el-button>
<!--                <el-popover placement="bottom" width="260" trigger="click">
                    <div class="step-import">
                        <div class="step1">
                            <el-link type="primary" @click="downTemplate">下载模板</el-link>
                            <div>请先下载模板，根据模板填写后导入。<br />部分复杂表格格式暂不支持导入，请完成导入后进入详情页面手动添加。</div>
                        </div>
                        <upLoad-normal
                            :accept="'.xlsx'"
                            :isSingle="true"
                            @httpRequest="httpRequest">
                            <el-link type="primary">导入excel</el-link>
                        </upLoad-normal>
                    </div>
                    <el-button slot="reference" type="primary" class="import-btn">导入</el-button>
                </el-popover>-->
            </div>
        </div>
        <div class="task-detail-container">
            <div class="left">
                <el-table
                    v-show="tableData.length"
                    ref="multipleTable"
                    :data="tableData"
                    class="pbb__table"
                    header-cell-class-name="pbb__table-thead"
                    cell-class-name="pbb__table-thead-cell"
                    row-class-name="pbb__table-thead-row"
                    row-key="id"
                    style="width: 100%;height: 100%;background: #fff;overflow-y: auto;"
                    @selection-change="onTableSelectionChange">
<!--                    <el-table-column-->
<!--                        align="center"-->
<!--                        type="selection"-->
<!--                        :reserve-selection="true"-->
<!--                        width="60">-->
<!--                    </el-table-column>-->
                    <el-table-column
                        label="序号"
                        align="center"
                        type="index"
                        width="60">
                    </el-table-column>
                    <el-table-column
                        v-for="(item, index) in tableColumn"
                        :key="index"
                        :prop="item.prop"
                        :label="item.name"
                        :show-overflow-tooltip="[3, 4, 6, 7, 12].includes(item.valueKindId)"
                        :min-width="[3, 11].includes(item.valueKindId) ? '200px' : [5, 8].includes(item.valueKindId) ? '140px' : (item.name.length * 16 + 20) > 140 ? (item.name.length * 16 + 20 + 'px') : '140px'">
                        <template slot-scope="scope">
                            <template v-if="item.valueKindId === 4" class="address-text">
                                {{ scope.row[item.prop] ? scope.row[item.prop].cityName : "" }}
                                {{ scope.row[item.prop] && scope.row[item.prop].cityAddress ? scope.row[item.prop].cityAddress : "" }}
                            </template>
                            <div v-else-if="item.valueKindId === 5">
                                <div v-if="scope.row[item.prop] && scope.row[item.prop].length">
                                    <img class="table-img" :src="$staticUrl + '/' + scope.row[item.prop][0]" alt="" @click="previewImg(scope.row[item.prop])"/>
                                </div>
                            </div>
                            <div v-else-if="item.valueKindId === 8">
                                <div v-if="scope.row[item.prop] && scope.row[item.prop].length">
<!--                                    <video class="table-img" :src="$staticUrl + '/' + scope.row[item.prop][0]" alt="" @click="previewVideo(scope.row[item.prop])"></video>-->
                                    <el-buttom @click="previewVideo(scope.row[item.prop])">点击播放</el-buttom>
                                </div>
                            </div>
                            <div v-else-if="item.valueKindId === 9">
                                <div v-if="scope.row[item.prop] && scope.row[item.prop].length">
                                    <el-button type="text" @click="previewVideo(scope.row[item.prop])">播放</el-button>
                                </div>
                            </div>
                            <div v-else-if="item.valueKindId === 10">
                                <div v-if="scope.row[item.prop] && scope.row[item.prop].length">
                                    <el-link
                                        class="table-file"
                                        v-for="(it, idx) in scope.row[item.prop]"
                                        :key="idx"
                                        type="primary"
                                        :href="$staticUrl + '/' + it"
                                        target="_blank">
                                        文件{{ idx + 1 }}
                                    </el-link>
                                </div>
                            </div>
                            <span v-else class="other-span" :title="scope.row[item.prop]">{{ scope.row[item.prop] }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <ask-empty-text style="min-height: 400px;" v-if="tableData.length === 0"></ask-empty-text>
            </div>
        </div>
        <template v-slot:footer v-if="total > 0">
<!--            <div class="page-base-footer__right">-->
<!--                <div class="num-box">已选<span>{{ batchList.length }}</span>条</div>-->
<!--                <el-divider direction="vertical"></el-divider>-->
<!--                <el-button :disabled="batchList.length === 0 || !canBatch.changeData" @click="deleteRows">批量删除</el-button>-->
<!--            </div>-->
            <pagination :total="total" :page.sync="pageIndex" :limit.sync="pageSize" @pagination="getTable"/>
        </template>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import UpLoadNormal from "@/components/upload-normal/index.vue";
import { dialogPreviewImg } from "@/components/public/preview-img/index";
import { dialogPreviewVideoAudio } from "@/components/public/preview-video-audio/index";
import { downLoadBase64File } from "@/utils";

@Component({
    name: "ImportCreateDetailNotAlive",
    components: {
        UpLoadNormal
    }
})
export default class ImportCreateDetail extends Vue {
    // 表格名称
    tableName: any = "";
    // 数据总数
    total = 0;
    // 每页数量
    pageSize = 10;
    // 当前页码
    pageIndex = 1;
    // 表格数据
    tableData: any[] = [];
    // 动态表头
    tableColumn: any = [];
    // 所有数据
    allData: any = [];

    // 批量操作数据集合
    batchList: any[] = [];
    canBatch: any = {
        // 是否可以批量修改数据范围
        changeData: false
    };

    get formId(): any {
        return this.$route.query.formId || "";
    }

    created() {
        this.initPage();
    }

    initPage() {
        this.getTableTitle();
        this.getTable();
        this.tableName = this.$route.query.name;
    }

    async getTableTitle() {
        const res = await this.$server["importCreate/form/title"]({
            data: {
                formId: this.formId
            }
        });
        if (res.data.code === 200) {
            const column = [{
                prop: "createTime",
                name: "导入时间"
            }];
            // const column: any[] = [];
            this.tableColumn = [];
            this.tableColumn.push(...this.buildData(res.data.data));
            this.tableColumn = this.tableColumn.map((item: any) => {
                return {
                    ...item,
                    prop: item.itemType === 1 ? item.childrenFormId : item.id,
                    valueKindId: Number(item.valueKindId)
                };
            });
            this.tableColumn = column.concat([], this.tableColumn);
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    buildData(list: any) {
        const tableColumn: any[] = [];
        list.forEach((item: any) => {
            if (item.itemType === 0) {
                tableColumn.push(...this.buildData(item.items));
            } else {
                tableColumn.push(item);
            }
        });
        return tableColumn;
    }

    async getTable() {
        const res = await this.$server["importCreate/form/data"]({
            data: {
                formId: this.formId,
                currentPage: this.pageIndex,
                pageSize: this.pageSize
            }
        });
        if (res.data.code === 200) {
            this.tableData = [];
            this.allData = res.data.data.records;
            res.data.data.records.forEach((item: any) => {
                const row = {
                    ...item
                };
                item.itemDataList.forEach((it: any) => {
                    if (["4", "5", "8", "9", "10"].includes(it.valueKindId.toString())) {
                        row[it.itemId] = it.extData || [];
                    } else {
                        row[it.itemId] = it.itemValue || "";
                    }
                });
                this.tableData.push(row);
            });
            this.total = res.data.data.total;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 表格选中修改
    onTableSelectionChange(selectList: any[]) {
        const changeDataList = selectList;
        this.canBatch.changeData = changeDataList.length === selectList.length;
        this.batchList = selectList;
    }

    // 图片预览
    previewImg(urls: any) {
        const list = urls.map((item: any) => this.$staticUrl + "/" + item);
        dialogPreviewImg({
            title: "预览图片",
            current: list
        });
    }

    // 视频预览
    previewVideo(file: any) {
        dialogPreviewVideoAudio({
            sourceUrl: this.$staticUrl + "/" + file[0]
        });
    }

    // 删除行
    deleteRows() {
        this.$confirm("是否确定删除?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        })
            .then(async() => {
                const res = await this.$server["importCreate/deleteTable/data"]({
                    data: {
                        dataFormIds: this.batchList.map((item: any) => item.dataFormId)
                    }
                });
                if (res.data.code === 200) {
                    this.$message.success("操作成功!");
                    await this.getTable();
                } else {
                    this.$message.error(res.data.message || "接口请求错误!");
                }
            })
            .catch();
    }

    // 下载模板
    async downTemplate() {
        const res = await this.$server["task/download/templateForm"]({
            data: {
                formId: this.formId
            }
        });
        if (res.data && res.data.code === 200) {
            downLoadBase64File(this.$route.query.name + "-" + "填报模板.xlsx", res.data.data);
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 自定义上传文件
    async httpRequest(fileList: any[]) {
        const form = new FormData();
        form.append('formId', this.formId);
        for (let i = 0; i < fileList.length; i++) {
            form.append('file', fileList[i], fileList[i].name);
        }
        const res = await this.$server["importCreate/form/import/data"]({
            data: form
        });
        if (res.data.code === 200) {
            const msg = await this.$store.dispatch("importNotice", {
                formId: this.formId
            });
            if (msg) {
                this.$message.success("导入成功，有其他特殊控件无法导入，请前往手动填写");
            } else {
                this.$message.success("导入成功");
            }
            this.getTable();
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    goBack() {
        this.$router.back();
    }
}
</script>
<style scoped lang="scss">
::v-deep {
    .page-base-body {
        background: transparent!important;
    }
    .pbb__table {
        .pbb__table-thead {
            .cell {
                height: 22px;
            }
        }
    }
}
.right-btn {
    float: right;
}

.task-detail-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: calc(100% - 88px);
    .left {
        width: 100%;
        height: 100%;
    }
}

.table-img {
    width: 120px;
    height: 80px;
    cursor: pointer;
    object-fit: contain;
}

.table-file {
    margin-right: 12px;
}

.acceptance-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 10px;
    .label {
        margin-right: 20px;
        line-height: 36px;
    }
    .right {
        p {
            margin: 5px 0 10px 0;
        }
    }
}
.preview-video {
    display: block;
    margin: 0 auto;
}

.import-btn {
    margin: 0 10px;
}
.isSingle {
    /deep/.el-table__header-wrapper {
        .el-checkbox {
            display: none;
        }
    }
}
.address-text {
    @include textEllipsis();
}

.task-detail-header {
    padding: 10px 18px;
    .title p.description {
        font-size: 14px;
        max-width: 640px;
        @include textEllipsis();
    }
    .btn {
        font-size: 14px;
        color: #2c82c9;
        cursor: pointer;
        line-height: 22px;
        &:hover {
            text-decoration: underline;
        }
    }
}

.rich-dialog {
    ::v-deep {
        .el-dialog__header {
            border-bottom: 1px solid #ccc;
        }
        .el-dialog__body {
            padding: 10px 20px;
            .titleName {
                font-size: 16px;
                padding: 0;
                margin: 0;
                margin-bottom: 10px;
            }
            .centent {
                max-height: 600px;
                overflow-y: scroll;
            }
        }
    }
}
</style>
